<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section {
			width: 800px;
			height: 300px;
			border:1px solid red;
			display: flex;
			/*justify-content: space-between;  盒子之间加上空隙*/
			/*justify-content: space-around;  每个盒子两边加上空隙，相当于加上margin-left、right*/
			/*justify-content: center;  居中分布*/
			/*justify-content: flex-start;   从父盒子开始处分布*/
			justify-content: space-around;   /* 从父盒子结尾处开始分布*/
			/*align-items: center;    垂直居中*/
			/*align-items: flex-start;   顶部对齐*/
			/*align-items: flex-end;   底部对齐*/
			align-items: stretch;   /* 在没设定高度的前提下拉伸高度使其与父盒子相同
*/
		}
		div {
			
			width: 200px;
			background-color: pink;

		}
		div:first-child {
			background-color: blue;
		}
		
		div:nth-child(2) {
			background-color: purple;
		}

	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>